<template>
     <div class="tabber">
         <div v-for="(item,index) in tablist" :key="index" class="tab" @click="change(index)" :class="{active:cindex == index}">{{item}}</div>
     </div>
</template>

<script>
export default {
       data(){
           return {
               cindex:0,
               tablist:[
                   "首页",
                   "爆爆团",
                   "订单",
                   "我的"
               ]
           }
       },
       methods:{
           change(index){
               this.cindex = index
           }
       }
}
</script>

<style>
     *{
           margin: 0;
           padding: 0;
       }
     .tabber{
         width: 100%;
         height: 30px;
           position: fixed;
           bottom:0;
           display: flex;
           justify-content: space-around;
          /* margin: 0 20px;            */
          margin: 10px 0;
          border-top:1px solid #999;
     }
     .tabber .tab{
         padding: 10px;
     }
     .active{
         color: red;
     }
</style>